<template>
  <h1>App</h1>
  <p v-memo="[]">{{ num }}</p>
  <p v-once>{{ num }}</p>
  <p v-pre>{{ num }}</p>
  <button @click="num++">按钮</button>
</template>

<script lang="ts">
/*
  指令语法：  
    1. 常用指令：
      v-bind  
        语法：v-bind:xxx="xxx" 
        简写：:xxx="xxx"
        作用：单向数据绑定（给标签属性绑定动态的值）

        修饰符：.sync 用于双向通信（vue2）
        vue3移除.sync。
      
      v-for
        语法：v-for="(item, index) in xxx" :key="item.id" 
        key要求：1. 唯一 2. 稳定（更新前后一致）
        作用：列表渲染

      v-on
        语法：v-on:事件名称="事件回调函数"
        简写：@事件名称="事件回调函数"
        作用：绑定事件

        事件修饰符：
          .prevent
          .once
          .stop
          .native(vue2给组件绑定DOM事件)  vue3移除.native
        按钮修饰符
          .enter
          .13

      v-if/v-else-if/v-else
        语法：v-if="xxx"
        作用：条件渲染（让元素显示或隐藏）

      v-show
        语法：v-show="xxx"
        作用：条件渲染（让元素显示或隐藏）

        v-if和v-show的区别：
          v-if隐藏时会销毁元素
          v-show通过样式display:none来隐藏元素

      v-model
        语法：v-model="xxx"
        作用：双向数据绑定（常用于表单项）
        
      v-slot
        语法：v-slot:xxx  v-slot="{ xxx }" v-slot:xxx="{ xxx }"
        简写：#xxx  #default="{ xxx }" #xxx="{ xxx }"
        作用：父子组件通信，通信的是标签数据

      v-memo(Vue3新增)
        语法：v-memo="[xxx]"
        作用：用来缓存部分模板页面（DOM元素）

    2. 不常用指令：
      v-html
        语法：v-html="xxx"
        作用：设置元素的innerHTML
      v-text
        语法：v-text="xxx"
        作用：设置元素的textContent
      v-once
        让模板只会解析一次，后面不会解析了
      v-pre
        跳过解析，直接将原始内容渲染上去
      v-cloak
        用于隐藏尚未完成编译的 DOM 模板。
*/
export default {
  name: "App",
  data() {
    return {
      num: 0,
    };
  },
};
</script>

<style scoped></style>
